<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="项目名称">
        <el-input type="text" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="登录标题">
        <el-input type="text" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="版权信息">
        <el-input type="textarea" v-model="form.desc" placeholder="请输入底部版权信息，包含html代码"></el-input>
      </el-form-item>
      <el-form-item label="使用指南">
        <el-input type="text" v-model="form.guide"  placeholder="请配置使用指南地址，有地址就显示，为空就不显示"></el-input>
      </el-form-item>
      <el-form-item label="主题色">
        <el-color-picker
          v-model="form.theme"
          :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
          class="theme-picker"
          popper-class="theme-picker-dropdown"
        />
      </el-form-item>
      <el-form-item label="LOGO">
        <my-upload-image  v-model="form.logo" accept=".jpg,.jpeg,.png,.gif,.bmp" :limit="1" v-if="loading"></my-upload-image>
      </el-form-item>
      <el-form-item label="登录背景">
        <my-upload-image  v-model="form.homeBackground" accept=".jpg,.jpeg,.png,.gif,.bmp" :limit="1" v-if="loading"></my-upload-image>
      </el-form-item>
      <el-form-item label="手机登录背景">
        <my-upload-image  v-model="form.mobileBackground" accept=".jpg,.jpeg,.png,.gif,.bmp" :limit="1" v-if="loading"></my-upload-image>
      </el-form-item>
      <el-form-item label="个人中心左图">
        <my-upload-image  v-model="form.userCenter" accept=".jpg,.jpeg,.png,.gif,.bmp" :limit="1" v-if="loading"></my-upload-image>
      </el-form-item>
      <el-form-item label="文件库图片">
        <my-upload-image  v-model="form.filelibraryImg" accept=".jpg,.jpeg,.png,.gif,.bmp" v-if="loading"></my-upload-image>
      </el-form-item>
      <el-form-item label="新闻图片">
        <my-upload-image  v-model="form.newsImg" accept=".jpg,.jpeg,.png,.gif,.bmp" v-if="loading"></my-upload-image>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import baseSettings from "@/api/systemManagement/baseSettings/index";
import MyUploadImage from '../../../../components/Common/MyUploadImage'
import store from '@/store'
import ThemePicker from '@/components/ThemePicker'
export default {
  name: "SiteSetting",
  components: { MyUploadImage,ThemePicker},
  data() {
    return {
      form: {
        name: "",
        logo: "",
        homeBackground:"",
        mobileBackground:"",
        userCenter:"",
        filelibraryImg:"",
        newsImg:"",
        guide:"",
        theme:""
      },
      loading:false,
    };
  },
  created() {
    this.getData();
  },
  computed: {
    action() {
      return process.env.VUE_APP_BASE_API + "/api/upload_file/";
    }
  },
  methods: {
    getData() {
      store.dispatch('baseSettings/getSiteInfo',true).then(res=>{
        this.form = res;
        this.loading = true
      })
    },
    onSubmit() {
      baseSettings.settingsSite(this.form).then(res => {
        this.$store.dispatch('baseSettings/setTheme', this.form.theme)
        this.msgSuccess("保存成功!");
      });
    },
  }
};
</script>
<style scoped>
.img-bg {
  background: #999999;
}
</style>
